<template>
  <div class="app-container"
       v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-select v-model="reqData.year"
                 placeholder="请选择年份">
        <el-option key="-1"
                   label="全部"
                   value="-1"></el-option>
        <el-option v-for="item in yearList"
                   :key="item"
                   :label="item"
                   :value="item">
        </el-option>
      </el-select>
      <el-select v-model="reqData.subject"
                 placeholder="请选择科目">
        <el-option key="-1"
                   label="全部"
                   value="-1"></el-option>
        <el-option v-for="item in subjectList"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-button type="primary"
                 icon="el-icon-search"
                 @click.native.prevent="handleSearch">
        搜索
      </el-button>
      <el-button style="margin-left: 10px;"
                 type="primary"
                 icon="el-icon-edit"
                 @click.native.prevent="handleImport">
        导入
      </el-button>
      <el-button style="margin-left: 10px;"
                 type="danger"
                 icon="el-icon-delete"
                 @click.native.prevent="handleDelete">
        删除
      </el-button>
    </div>
    <el-table border
              stripe
              highlight-current-row
              style="width: 100%;"
              :data="listData"
              @selection-change="handleSelectionChange"
              :empty-text="emptyText">
      <el-table-column type="selection"
                       width="55"></el-table-column>
      <el-table-column label="ID"
                       prop="rankId"></el-table-column>
      <el-table-column label="年份"
                       prop="rankYear"></el-table-column>
      <el-table-column label="科目"
                       prop="subjectShow"></el-table-column>
      <el-table-column label="分数"
                       prop="rankScore"></el-table-column>
      <el-table-column label="区间"
                       prop="rankSection"></el-table-column>
      <el-table-column label="同分人数"
                       prop="rankScoreNum"></el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click.native.prevent="handleEdit(scope.row.rankId)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination background
                     :pager-count="pagerCount"
                     :page-size="reqData.perPage"
                     :current-page="reqData.curPage"
                     layout="prev, pager, next"
                     @current-change="pageChange"
                     :total="total">
      </el-pagination>
    </div>
    <el-dialog title="导入位次"
               :visible.sync="dialogFormVisible">
      <el-form :model="importFormData"
               label-width="120px"
               label-position="left">
        <el-form-item label="年份">
          <el-select v-model="importFormData.year"
                     placeholder="请选择年份">
            <el-option v-for="item in yearList"
                       :key="item"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科目">
          <el-select v-model="importFormData.subject"
                     placeholder="请选择科目">
            <el-option v-for="item in subjectList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="excel文件">
          <el-upload :on-success="uploadSuccess"
                     action="uploadUrl">
            <el-button size="small"
                       type="primary">点击上传</el-button>
          </el-upload>
          <a href="RankExample.xlsx"
             target="_blank">点击下载示例excel</a>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click.native.prevent="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary"
                   @click.native.prevent="doImport">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, del, importExcel } from '@/api/rank'
import { errorMsg, successMsg } from '@/utils/my'

export default {
  inject: ['reload'],
  data () {
    return {
      reqData: {
        year: '',
        subject: '',
        curPage: 1,
        perPage: 20
      },
      pagerCount: 13,
      total: 0,
      listData: [],
      loading: true,
      delRows: [],
      delIds: '',
      emptyText: '暂无任何数据',
      dialogFormVisible: false,
      importFormData: {
        year: '',
        subject: '',
        excelUrl: ''
      },
      yearList: [],
      subjectList: [
        { id: 1, name: '文科' },
        { id: 2, name: '理科' }
      ]
    }
  },

  created () {
    this.genYearList()
    this.fetchData()
  },
  computed: {
    uploadUrl () {
      return `${process.env.VUE_APP_BASE_API}/upload/backend`
    }
  },

  methods: {
    handleCreate () {
      //this.$router.push({path: '/admin/rank/create'})
    },

    handleEdit (id) {
      this.$router.push({ path: '/admin/rank/edit/' + id })
    },

    pageChange (p) {
      this.reqData.curPage = p
      this.fetchData()
    },

    fetchData () {
      const that = this
      that.loading = true
      let tmpData = JSON.parse(JSON.stringify(that.reqData))
      tmpData.year = tmpData.year.length <= 0 ? 0 : parseInt(tmpData.year)
      tmpData.subject = tmpData.subject.length <= 0 ? 0 : parseInt(tmpData.subject)
      getList(tmpData).then(res => {
        that.loading = false
        that.total = res.data.total
        that.listData = res.data.list
      })
    },

    handleSearch () {
      this.reqData.curPage = 1
      this.fetchData()
    },

    handleSelectionChange (rows) {
      this.delRows = rows
      let idArr = []
      for (let i = 0; i < rows.length; i++) {
        idArr.push(rows[i].rankId)
      }
      this.delIds = idArr.join(',')
    },

    handleDelete () {
      const that = this
      if (that.delIds.length <= 0) {
        return errorMsg('请至少选择一项')
      }
      that.loading = true
      del({ ids: that.delIds }).then(res => {
        that.loading = false
        if (res.code != 20000) {
          return errorMsg(res.message)
        }
        successMsg(res.message)
        that.reload()
      })
    },

    handleImport () {
      this.dialogFormVisible = true
    },

    genYearList () {
      const that = this
      let d = new Date(),
        curYear = d.getFullYear()
      for (let i = 0; i < 5; i++) {
        that.yearList.push(curYear)
        curYear--
      }
    },

    uploadSuccess (res) {
      if (res.code != 20000) {
        return errorMsg(res.message)
      }
      this.importFormData.excelUrl = res.data.url
      successMsg(res.message)
    },

    doImport () {
      const that = this
      let d = that.importFormData
      if (d.year.length <= 0) {
        return errorMsg('请选择年份')
      }
      if (d.subject.length <= 0) {
        return errorMsg('请选择科目')
      }
      if (d.excelUrl.length <= 0) {
        return errorMsg('请上传excel文件')
      }
      that.dialogFormVisible = false
      that.loading = true
      importExcel(d).then(res => {
        that.loading = false
        if (res.code != 20000) {
          return errorMsg(res.message)
        }
        successMsg(res.message)
        that.reload()
      })
    }
  }
}
</script>

<style>
.filter-container {
  margin-bottom: 10px;
}

.pager {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
</style>
